<style>
  .layui-table-cell .layui-table-sort {
    display: none;
  }

  .import {
    opacity: 0;
    position: absolute;
    width: 69px;
    height: 38px;
    margin-left: -10px;
  }
  .cardU {
    background-image: url(../../../admin/assets/images/card_u.png);
    background-repeat: no-repeat;
    background-position: center;
    width: calc(100% - 142px);
    height: 150px;
    padding: 0;
  }
  .cardU img {
    width: 100%;
    height: 100%;
  }

  .companyFormPhotos {
    /* margin-left:140px; */
    line-height: 38px;
    float: left;
    margin-right: 30px;
  }

  .companyFormPhotos img {
    cursor: pointer;
    height: 38px;
    width: auto;
    max-width: 200px;
  }
</style>

<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 头部操作栏 -->
      <div class="layui-form lay-header">
        <div class="toolbar">
          <div class="layui-form-item lay-query-content">
            <div class="lay-query-box">
              <div class="query-lt">
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">工种名称：</label>
                  <div class="layui-input-inline">
                    <input
                      name="professionName"
                      id="professionName"
                      class="layui-input"
                      type="text"
                      placeholder="请输入工种名称"
                      autocomplete="off"
                    />
                  </div>
                </div>

                <div class="layui-inline">
                  <label class="layui-form-label w-auto">工种编码：</label>
                  <div class="layui-input-inline">
                    <input
                      name="professionCode"
                      id="professionCode"
                      class="layui-input"
                      type="text"
                      placeholder="请输入工种编码"
                      autocomplete="off"
                    />
                  </div>
                </div>
              </div>
              <div class="query-rt">
                <div class="layui-inline">
                  <button
                    class="layui-btn icon-btn color-green"
                    lay-filter="formSubSearchLog"
                    lay-submit
                    layui-form-keyDownSearch="true"
                  >
                    查询
                  </button>
                  <button
                    class="layui-btn icon-btn color-white"
                    lay-filter="resets"
                    lay-submit
                  >
                    重置
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="lay-btn-rows">
          <div class="lay-btn-box">
            <div class="lay-btn-lt">
              <button
                id="professionBtnAdd"
                class="layui-btn icon-btn color-reseda"
              >
                添加
              </button>
              <button
                id="configFun"
                style="display: none"
                class="layui-btn icon-btn color-reseda"
                type="button"
              >
                确认选择
              </button>
            </div>
            <div class="lay-btn-rt"></div>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <table
        class="layui-table"
        id="professionTable"
        lay-filter="professionTable"
      ></table>
    </div>
  </div>
</div>

<!-- 表格操作列 -->
<!--<script type="text/html" id="productPlanningTableBar">
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">修改</a>

  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="disables">禁用</a>
</script>-->

<script type="text/html" id="productPlanningTableBar">
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">修改</a>
  {{# if(d.professionStatus){ }}
  <!-- 如果 professionStatus 为 true（即1），则显示禁用按钮 -->
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="disables"
    >禁用</a
  >
  {{# } else { }}
  <!-- 如果 professionStatus 为 false（即0），则显示启用按钮 -->
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="openDisables"
    >启用</a
  >
  {{# } }}
</script>

<script type="text/html" id="professionForm">
  <form lay-filter="professionForm" class="layui-form model-form">
    <input name="id" type="hidden" />

    <div class="layui-form-item">
      <label class="layui-form-label"
        ><span style="color: red">*</span>工种名称</label
      >
      <div class="layui-input-block">
        <input
          name="professionName"
          placeholder="请输入工种名称"
          type="text"
          class="layui-input"
          required
        />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label"
        ><span style="color: red">*</span>工种编码</label
      >
      <div class="layui-input-block">
        <input
          name="professionCode"
          placeholder="请输入工种编码"
          type="text"
          class="layui-input"
          required
        />
      </div>
    </div>

    <!--    <div class="layui-form-item">
      <label class="layui-form-label">上传ICON</label>
      <div class="layui-upload-drag cardU" id="iconUrl">
        &lt;!&ndash;<i class="layui-icon"></i>
        <p>点击上传，或将文件拖拽到此处</p>&ndash;&gt;
        <input type="hidden" name="iconUrl" lay-verify="" data-name="上传ICON" >
      </div>
    </div>-->

    <div class="layui-form-item">
      <label class="layui-form-label">上传ICON</label>
      <div class="layui-input-block">
        <div id="devicePic_path" class="companyFormPhotos"></div>
        <div id="iconUrlPicBtn" class="layui-btn" style="float: left;">
          <i class="layui-icon">&#xe681;</i>上传ICON
        </div>
        <input
          name="iconUrl"
          type="hidden"
          class="layui-input"
          lay-verify=""
          id="iconUrl"
        />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">排序</label>
      <div class="layui-input-block">
        <input
          name="sortNumber"
          placeholder="请输入排序"
          type="text"
          class="layui-input"
          lay-verify="number"
        />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label"
        ><span style="color: red">*</span>是否启用</label
      >
      <div class="layui-input-block">
        <input
          name="professionStatus"
          type="checkbox"
          lay-skin="switch"
          value="0"
          checked="false"
          lay-text="启用|停用"
        />
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">备注</label>
      <div class="layui-input-block">
        <textarea
          name="remark"
          placeholder="请输入备注"
          class="layui-textarea"
          maxlength="200"
          autocomplete="off"
        ></textarea>
      </div>
    </div>

    <div class="layui-form-item text-right">
      <button
        class="layui-btn layui-btn-primary"
        type="button"
        ew-event="closeDialog"
      >
        取消
      </button>
      <button class="layui-btn" lay-filter="professionFormSubmit" lay-submit>
        保存
      </button>
    </div>
  </form>
</script>

<!-- js部分 -->
<script>
  layui.use(
    [
      "layer",
      "form",
      "table",
      "laydate",
      "admin",
      "laytpl",
      "tableTreeDj",
      "config",
      "upload",
    ],
    function () {
      var $ = layui.jquery;
      var layer = layui.layer;
      var laydate = layui.laydate;
      var table = layui.table;
      var form = layui.form;
      var config = layui.config;
      var admin = layui.admin;
      var tableTree = layui.tableTreeDj;
      var upload = layui.upload;
      let nowData = {};
      let where = {};
      if (typeof parentData !== "undefined") {
        nowData = { ...parentData };
        if (nowData.eventName == "radio" || nowData.eventName == "checkbox") {
          $("#configFun").show();
        }
        if (nowData.where) {
          where = nowData.where;
        }
      }
      // 渲染表格
      var insTb = table.render({
        elem: "#professionTable",
        url: config.base + "production/productionPlan/admin/profession/list",
        page: true,
        cellMinWidth: 100,
      where: {...where},

        cols: [
          [
            {
              type: "checkbox",
              hide: nowData.eventName == "radio" ? true : false,
            },
            {
              type: "radio",
              hide: nowData.eventName == "radio" ? false : true,
            },
            { type: "numbers", title: "序号" },
            {
              field: "professionName",
              title: "工种名称",
              align: "center",
              width: 160,
            },
            { field: "professionCode", title: "工种编码", align: "center" },
            {
              align: "left",
              toolbar: "#productPlanningTableBar",
              title: "操作",
              width: 280,
            },
          ],
        ],
        done: function (res, curr, count) {
          a = table.cache["productionPlanTable"];
        },
      });
      //渲染下拉
      form.render("select");

      // 工具条点击事件
      table.on("tool(professionTable)", function (obj) {
        let data = obj.data;
        if (obj.event === "edit") {
          //修改
          admin.req(
            "production/productionPlan/admin/profession/get",
            { id: data.id },
            function (res) {
              layer.closeAll("loading");
              if (res.code == 200) {
                data = res.data;
                data.eventType = "edit";
                showEditModel(data);
              } else {
                layer.msg(res.msg, { icon: 2 });
              }
            },
            "GET"
          );
        } else if (obj.event === "disables") {
          disables(data);
        } else if (obj.event === "openDisables") {
          disables(data);
        }
      });

      function disables(data) {
        let obj = {};
        obj.id = data.id;
        if (data.professionStatus == 1) {
          obj.professionStatus = false;
        } else {
          obj.professionStatus = true;
        }
        admin.req(
          "production/productionPlan/admin/profession/editStatus",
          JSON.stringify(obj),
          function (res) {
            layer.closeAll("loading");
            if (res.code == 200) {
              layer.msg(res.msg, { icon: 1 });
              table.reload("professionTable");
              layer.closeAll("page");
            } else {
              layer.msg(res.msg, { icon: 2 });
            }
          },
          "POST",
          true,
          "application/json; charset=utf-8"
        );
      }

      // 搜索
      form.on("submit(formSubSearchLog)", function (data) {
        insTb.reload({ where: data.field, page: { curr: 1 } }, "data");
      });

      // 重置搜索
      form.on("submit(resets)", (data) => {
        $(".lay-header").find("select").val("");
        $(".lay-header").find("input").val("");
        let field = data.field;
        for (let key in field) {
          field[key] = "";
        }
        insTb.reload({ where: field, page: { curr: 1 } }, "data");
      });

      // 添加按钮点击事件
      $("#professionBtnAdd").click(function () {
        let addData = {};
        addData.eventType = "add";
        showEditModel(addData);
      });
      $("#configFun").click(function () {
        let list = table.checkStatus("professionTable").data;
        childData.list = list;
        layer.close(nowData.zindex);
      });
      // 显示编辑弹窗
      function showEditModel(data) {
        admin.open({
          type: 1,
          area: "600px",
          offset: "65px",
          title: data.eventType == "edit" ? "修改工种" : "添加工种",
          content: $("#professionForm").html(),
          success: function () {
            form.val("professionForm", data);
            //上传头像
            $("#iconUrlPicBtn").click(
              uploadImg("iconUrlPicBtn", "devicePic_path", "iconUrl")
            );
          },
        });
      }

      // 表单提交事件
      form.on("submit(professionFormSubmit)", function (d) {
        layer.load(2);
        let professionStatus = $("form input[name='professionStatus']").prop(
          "checked"
        );
        if (!professionStatus) {
          d.field.professionStatus = false;
        } else {
          d.field.professionStatus = true;
        }
        let flagId = d.field.id;

        if (flagId == null || flagId == undefined || flagId == "") {
          admin.req(
            "production/productionPlan/admin/profession/professionAdd",
            JSON.stringify(d.field),
            function (res) {
              layer.closeAll("loading");
              if (res.code == 200) {
                layer.msg(res.msg, { icon: 1 });
                table.reload("professionTable");
                layer.closeAll("page");
              } else {
                layer.msg(res.msg, { icon: 2 });
              }
            },
            "POST",
            true,
            "application/json; charset=utf-8"
          );
        } else {
          admin.req(
            "production/productionPlan/admin/profession/professionUpdate",
            JSON.stringify(d.field),
            function (res) {
              layer.closeAll("loading");
              if (res.code == 200) {
                layer.msg(res.msg, { icon: 1 });
                table.reload("professionTable");
                layer.closeAll("page");
              } else {
                layer.msg(res.msg, { icon: 2 });
              }
            },
            "POST",
            true,
            "application/json; charset=utf-8"
          );
        }
        return false;
      });

      // 上传文件
      function uploadImg(_elem, pathId, inputId) {
        upload.render({
          elem: "#" + _elem,
          url: config.upload_url + "uploadFile",
          data: {},
          accept: "file",
          exts: "jpg|png|RAR|zip|pdf|txt|doc|docx|xls|xlsx|ppt|pptx",
          headers: { Authorization: "Bearer " + config.getToken() },
          done: function (res) {
            if (res.code == 200) {
              layer.msg(res.msg || "上传成功", { icon: 1 });
              let imagUrl = res.data.url;
              console.log(imagUrl);
              $("#" + pathId).html('<img src="' + imagUrl + '"/>');
              $("#" + inputId).val(imagUrl);
            } else if (res.code == 502) {
              return location.replace("admin/login.html");
            } else {
              layer.msg(res.msg || "上传失败", { icon: 2 });
            }
          },
        });
      }
    }
  );
</script>
